import React, { memo } from "react"
import type { ReactNode } from "react"
import SectionHeaderV1 from "@/components/SectionHeaderV1"
import SongItem from "@/components/SongItem"
import { shallowEqual } from "react-redux"
import { useAppSelector } from "@/store"
import "./index.less"
interface Iprops {
	children?: ReactNode
}
const keywords = [
	{ name: "华语", link: "/discover/songs/?cat=华语" },
	{ name: "流行", link: "/discover/songs/?cat=流行" },
	{ name: "摇滚", link: "/discover/songs/?cat=摇滚" },
	{ name: "民谣", link: "/discover/songs/?cat=民谣" },
	{ name: "电子", link: "/discover/songs/?cat=电子" },
]
const HotRecommend: React.FC<Iprops> = () => {
	const { hotRecommends } = useAppSelector(
		(state) => ({
			hotRecommends: state.recommend.hotRecommends,
		}),
		shallowEqual,
	)

	return (
		<div className="hotRecommendContainer">
			<SectionHeaderV1 moreLink="/discover/songs" keyWords={keywords} />
			<div className="recommend-list">
				{hotRecommends.map((item) => {
					return <SongItem key={item.id} song={item} size={140} />
				})}
			</div>
		</div>
	)
}

export default memo(HotRecommend)
